<template>
  <div class="app-container">
    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="patientList"
      element-loading-text="正在查询中。。。">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="联系电话">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="穿刺阶段">
              <span>{{ props.row.phase }}</span>
            </el-form-item>
            <el-form-item label="终点事件">
              <span>{{ props.row.terminal }}</span>
            </el-form-item>
            <el-form-item label="医费类型">
              <span>{{ props.row.paytype }}</span>
            </el-form-item>
            <el-form-item label="居住地">
              <span>{{ props.row.city }}</span>
            </el-form-item>
            <el-form-item label="看护人职业">
              <span>{{ props.row.job }}</span>
            </el-form-item>
            <el-form-item label="看护人婚姻">
              <span>{{ props.row.marry }}</span>
            </el-form-item>
            <el-form-item label="看护人收入">
              <span>{{ props.row.income }}</span>
            </el-form-item>
            <el-form-item label="看护人文化">
              <span>{{ props.row.education }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column align="center" width="80px" label="用户ID" prop="id" sortable/>
      <el-table-column align="center" width="80px" label="用户名" prop="name"/>

      <el-table-column align="center" width="80px" label="年龄">
        <template slot-scope="scope">
          <span>{{ getAge(scope.row.birthday) }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="80px" label="性别" prop="sex">
        <template slot-scope="scope">
          <el-tag >{{ genderDic[scope.row.sex] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="手臂" prop="arm"/>
      <el-table-column align="center" label="置管部位" prop="place"/>
      <el-table-column align="center" label="置管静脉" prop="vein"/>
      <el-table-column align="center" label="置管朝向" prop="orien"/>
      <el-table-column fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status"
            size="mini"
            type="primary"
            disabled
            @click="verity(scope.$index, scope.row)">已验证</el-button>
          <el-button
            v-else
            size="mini"
            type="primary"
            @click="verity(scope.$index, scope.row)">验证</el-button>
        </template>
      </el-table-column>

      <el-table-column fixed="right" align="center" label="维护">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="getMeasure(scope.row.id, scope.row.name)">维护记录</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getAllPatients, verifyPatient } from '@/api/patients'
export default {
  name: 'Patients',

  data() {
    return {
      patient: { userId: 1, jobnum: '111111', patientNum: '2222222', sex: 0, height: '110', weight: '40', nation: '汉', job: '工人', name: '张三',
        marry: '已婚', education: '大学', paytype: '医保', income: '2000', addrType: 'city' },
      patientList: [],
      listLoading: false,
      genderDic: ['男', '女', '未知'],
      statusDic: ['未激活', '可用'],
      value1: '',
      nurseId: 0
    }
  },

  created() {
    this.init()
  },

  methods: {
    init() {
      if (typeof (this.$store.getters.nurse) !== 'undefined') { this.nurseId = this.$store.getters.nurse.id }
      getAllPatients({
        nurseId: this.nurseId
      }).then(response => {
        this.patientList = response.data.data
        console.log(this.patientList)
      })
    },
    verity(index, patient) {
      console.log(patient)
      verifyPatient(patient).then(response => {
        console.log(response.data)
        this.patientList[index] = response.data.data
      })
    },
    getMeasure(index, name) {
      this.$router.push({
        name: 'p-records',
        params: {
          patient: index,
          pName: name
        }
      })
    },
    getAge(birthTime) {
      var now = new Date()
      var birth = new Date(birthTime)
      return (now.getFullYear() - birth.getFullYear()) + '岁'
    }
  }
}
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand span {
    text-decoration: underline;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
